<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离线内容 - 多语言旅行助手</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <h1>多语言旅行助手</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="learning.html">学习中心</a></li>
                <li><a href="translation.html">翻译</a></li>
                <li><a href="culture.html">文化知识库</a></li>
                <li><a href="map.html">离线地图</a></li>
                <li><a href="travel-plan.html">旅行计划</a></li>
                <li><a href="offline-content.html" class="active">离线内容</a></li>
                <li><a href="profile.html">个人资料</a></li>
                <li><a href="settings.html">设置</a></li>
            </ul>
        </nav>
    </header>

    <!-- 侧边导航栏 -->
    <aside class="side-nav">
        <ul>
            <li>
                <a href="index.html">
                    <img src="images/home.svg" alt="首页图标">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="learning.html">
                    <img src="images/book-open-bold.svg" alt="学习图标">
                    <span>学习</span>
                </a>
            </li>
            <li>
                <a href="translation.html">
                    <img src="images/vector_25_310.svg" alt="翻译图标">
                    <span>翻译</span>
                </a>
            </li>
            <li>
                <a href="culture.html">
                    <img src="images/globe-bold.svg" alt="文化图标">
                    <span>文化</span>
                </a>
            </li>
            <li>
                <a href="map.html">
                    <img src="images/vector_25_317.svg" alt="地图图标">
                    <span>地图</span>
                </a>
            </li>
            <li>
                <a href="offline-content.html" class="active">
                    <img src="images/vector_25_324.svg" alt="离线内容图标">
                    <span>离线</span>
                </a>
            </li>
            <li>
                <a href="settings.html">
                    <img src="images/vector_25_331.svg" alt="设置图标">
                    <span>设置</span>
                </a>
            </li>
        </ul>
    </aside>

    <!-- 内容区 -->
    <main class="content offline-content">
        <h1 class="page-title">离线内容管理</h1>
        
        <div class="destination-selector">
            <h2>选择目的地</h2>
            <div class="search-box">
                <input type="text" id="destination-search" placeholder="搜索国家或城市">
                <button id="search-btn">
                    <img src="images/placeholder.svg" alt="搜索" width="16" height="16">
                </button>
            </div>
            <div class="popular-destinations">
                <h3>热门目的地</h3>
                <div class="destination-grid">
                    <div class="destination-card" data-destination="tokyo">
                        <img src="images/placeholder.svg" alt="东京" class="destination-icon">
                        <span>东京</span>
                    </div>
                    <div class="destination-card" data-destination="paris">
                        <img src="images/placeholder.svg" alt="巴黎" class="destination-icon">
                        <span>巴黎</span>
                    </div>
                    <div class="destination-card" data-destination="newyork">
                        <img src="images/placeholder.svg" alt="纽约" class="destination-icon">
                        <span>纽约</span>
                    </div>
                    <div class="destination-card" data-destination="rome">
                        <img src="images/placeholder.svg" alt="罗马" class="destination-icon">
                        <span>罗马</span>
                    </div>
                    <div class="destination-card" data-destination="bangkok">
                        <img src="images/placeholder.svg" alt="曼谷" class="destination-icon">
                        <span>曼谷</span>
                    </div>
                    <div class="destination-card" data-destination="london">
                        <img src="images/placeholder.svg" alt="伦敦" class="destination-icon">
                        <span>伦敦</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="offline-packages">
            <div class="package-header">
                <h2>离线内容包</h2>
                <div id="selected-destination">请选择目的地</div>
            </div>
            
            <div class="packages-container">
                <div class="package-card language-package">
                    <div class="package-icon">
                        <img src="images/placeholder.svg" alt="语言包图标">
                    </div>
                    <div class="package-info">
                        <h3>语言包</h3>
                        <p>包含基本对话、常用短语和紧急用语</p>
                        <div class="package-size">约 <span id="language-size">50</span> MB</div>
                    </div>
                    <div class="package-actions">
                        <button id="download-language" class="download-btn" disabled>下载</button>
                    </div>
                </div>
                
                <div class="package-card map-package">
                    <div class="package-icon">
                        <img src="images/vector_25_317.svg" alt="地图包图标">
                    </div>
                    <div class="package-info">
                        <h3>离线地图</h3>
                        <p>包含详细街道地图、公共交通和主要景点</p>
                        <div class="package-size">约 <span id="map-size">200</span> MB</div>
                    </div>
                    <div class="package-actions">
                        <button id="download-map" class="download-btn" disabled>下载</button>
                    </div>
                </div>
                
                <div class="package-card culture-package">
                    <div class="package-icon">
                        <img src="images/placeholder.svg" alt="文化包图标">
                    </div>
                    <div class="package-info">
                        <h3>文化知识库</h3>
                        <p>包含历史背景、文化习俗和主要景点介绍</p>
                        <div class="package-size">约 <span id="culture-size">150</span> MB</div>
                    </div>
                    <div class="package-actions">
                        <button id="download-culture" class="download-btn" disabled>下载</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="storage-info">
            <h3>存储空间</h3>
            <div class="storage-bar-container">
                <div class="storage-bar">
                    <div class="storage-used" style="width: 35%;"></div>
                </div>
                <div class="storage-details">
                    <span>已使用: <span id="storage-used">3.5</span> GB</span>
                    <span>可用: <span id="storage-available">6.5</span> GB</span>
                </div>
            </div>
            <button id="manage-storage" class="secondary-btn">管理存储空间</button>
        </div>
        
        <div class="downloaded-content">
            <h2>已下载内容</h2>
            <div class="downloaded-list" id="downloaded-list">
                <div class="no-downloads">暂无已下载内容</div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 多语言旅行助手 | 版本 1.0</p>
    </footer>

    <script src="script.js"></script>
    <script>
        // 离线内容管理功能
        document.addEventListener('DOMContentLoaded', function() {
            const destinationCards = document.querySelectorAll('.destination-card');
            const selectedDestination = document.getElementById('selected-destination');
            const downloadLanguageBtn = document.getElementById('download-language');
            const downloadMapBtn = document.getElementById('download-map');
            const downloadCultureBtn = document.getElementById('download-culture');
            const downloadedList = document.getElementById('downloaded-list');
            const destinationSearch = document.getElementById('destination-search');
            const searchBtn = document.getElementById('search-btn');
            const manageStorageBtn = document.getElementById('manage-storage');
            
            // 从API获取目的地数据
            let destinationData = {};
            
            // 加载目的地数据
            async function loadDestinations() {
                try {
                    const response = await fetch('/api/available_destinations');
                    const data = await response.json();
                    
                    // 更新目的地数据
                    destinationData = data.destinations;
                    
                    // 更新UI显示可用和即将推出的目的地
                    updateDestinationUI(data.destinations);
                } catch (error) {
                    console.error('获取目的地信息失败:', error);
                    // 使用默认数据作为备份
                    destinationData = {
                        'tokyo': {
                            name: '东京',
                            country: '日本',
                            language: 'ja',
                            available: true,
                            languageSize: 45,
                            mapSize: 85,
                            cultureSize: 30
                        },
                        'paris': {
                            name: '巴黎',
                            country: '法国',
                            language: 'fr',
                            available: true,
                            languageSize: 50,
                            mapSize: 90,
                            cultureSize: 35
                        },
                        'newyork': {
                            name: '纽约',
                            country: '美国',
                            language: 'en',
                            available: true,
                            languageSize: 40,
                            mapSize: 95,
                            cultureSize: 32
                        },
                        'rome': {
                            name: '罗马',
                            country: '意大利',
                            language: 'it',
                            available: false,
                            coming_soon: true,
                            eta: '2025年7月'
                        },
                        'bangkok': {
                            name: '曼谷',
                            country: '泰国',
                            language: 'th',
                            available: false,
                            coming_soon: true,
                            eta: '2025年8月'
                        },
                        'london': {
                            name: '伦敦',
                            country: '英国',
                            language: 'en',
                            available: false,
                            coming_soon: true,
                            eta: '2025年9月'
                        }
                    };
                    updateDestinationUI(destinationData);
                }
            }
            
            // 更新目的地UI
            function updateDestinationUI(destinations) {
                const destinationGrid = document.querySelector('.destination-grid');
                destinationGrid.innerHTML = '';
                
                // 遍历所有目的地
                for (const [key, dest] of Object.entries(destinations)) {
                    const card = document.createElement('div');
                    card.className = 'destination-card';
                    card.dataset.destination = key;
                    
                    // 如果目的地不可用，添加特殊样式和提示
                    if (!dest.available) {
                        card.classList.add('unavailable');
                        card.innerHTML = `
                            <img src="images/placeholder.svg" alt="${dest.name}" class="destination-icon">
                            <span>${dest.name}</span>
                            <div class="coming-soon-badge">即将推出</div>
                            <div class="eta-info">预计: ${dest.eta}</div>
                        `;
                        
                        // 添加点击事件显示提示
                        card.addEventListener('click', () => {
                            alert(`${dest.name}的离线内容将于${dest.eta}推出，敬请期待！`);
                        });
                    } else {
                        card.innerHTML = `
                            <img src="images/placeholder.svg" alt="${dest.name}" class="destination-icon">
                            <span>${dest.name}</span>
                        `;
                        
                        // 添加正常的选择功能
                        card.addEventListener('click', () => {
                            selectDestination(key);
                        });
                    }
                    
                    destinationGrid.appendChild(card);
                }
            }
            
            // 初始加载目的地数据
            loadDestinations();
            
            // 已下载内容模拟数据
            const downloadedContent = [
                {
                    destination: 'tokyo',
                    name: '东京',
                    packages: ['language', 'map'],
                    date: '2025-05-15'
                }
            ];
            
            // 选择目的地
            destinationCards.forEach(card => {
                card.addEventListener('click', () => {
                    const destination = card.dataset.destination;
                    selectDestination(destination);
                });
            });
            
            // 搜索目的地
            searchBtn.addEventListener('click', () => {
                const searchTerm = destinationSearch.value.toLowerCase();
                if (!searchTerm) return;
                
                // 简单模拟搜索
                for (const [key, data] of Object.entries(destinationData)) {
                    if (data.name.toLowerCase().includes(searchTerm) || 
                        data.country.toLowerCase().includes(searchTerm)) {
                        selectDestination(key);
                        return;
                    }
                }
                
                alert(`未找到与"${destinationSearch.value}"匹配的目的地`);
            });
            
            // 下载按钮事件
            downloadLanguageBtn.addEventListener('click', function() {
                downloadPackage('language');
            });
            
            downloadMapBtn.addEventListener('click', function() {
                downloadPackage('map');
            });
            
            downloadCultureBtn.addEventListener('click', function() {
                downloadPackage('culture');
            });
            
            // 管理存储空间
            manageStorageBtn.addEventListener('click', function() {
                alert('存储空间管理功能将在下一版本实现');
            });
            
            // 选择目的地函数
            function selectDestination(destination) {
                if (!destinationData[destination]) return;
                
                // 更新UI
                destinationCards.forEach(card => {
                    card.classList.remove('selected');
                    if (card.dataset.destination === destination) {
                        card.classList.add('selected');
                    }
                });
                
                const data = destinationData[destination];
                selectedDestination.textContent = `${data.name}, ${data.country}`;
                
                // 更新包大小
                document.getElementById('language-size').textContent = data.languageSize;
                document.getElementById('map-size').textContent = data.mapSize;
                document.getElementById('culture-size').textContent = data.cultureSize;
                
                // 启用下载按钮
                downloadLanguageBtn.disabled = false;
                downloadMapBtn.disabled = false;
                downloadCultureBtn.disabled = false;
                
                // 检查是否已下载
                const downloaded = downloadedContent.find(item => item.destination === destination);
                if (downloaded) {
                    if (downloaded.packages.includes('language')) {
                        downloadLanguageBtn.textContent = '已下载';
                        downloadLanguageBtn.classList.add('downloaded');
                    } else {
                        downloadLanguageBtn.textContent = '下载';
                        downloadLanguageBtn.classList.remove('downloaded');
                    }
                    
                    if (downloaded.packages.includes('map')) {
                        downloadMapBtn.textContent = '已下载';
                        downloadMapBtn.classList.add('downloaded');
                    } else {
                        downloadMapBtn.textContent = '下载';
                        downloadMapBtn.classList.remove('downloaded');
                    }
                    
                    if (downloaded.packages.includes('culture')) {
                        downloadCultureBtn.textContent = '已下载';
                        downloadCultureBtn.classList.add('downloaded');
                    } else {
                        downloadCultureBtn.textContent = '下载';
                        downloadCultureBtn.classList.remove('downloaded');
                    }
                } else {
                    downloadLanguageBtn.textContent = '下载';
                    downloadMapBtn.textContent = '下载';
                    downloadCultureBtn.textContent = '下载';
                    downloadLanguageBtn.classList.remove('downloaded');
                    downloadMapBtn.classList.remove('downloaded');
                    downloadCultureBtn.classList.remove('downloaded');
                }
            }
            
            // 下载包函数
            function downloadPackage(packageType) {
                const selectedCard = document.querySelector('.destination-card.selected');
                if (!selectedCard) return;
                
                const destination = selectedCard.dataset.destination;
                const data = destinationData[destination];
                
                // 检查目的地是否可用
                if (!data.available) {
                    alert(`${data.name}的离线内容将于${data.eta}推出，敬请期待！`);
                    return;
                }
                
                // 显示下载状态
                const downloadBtn = document.getElementById(`download-${packageType}`);
                downloadBtn.textContent = '准备下载...';
                downloadBtn.disabled = true;
                
                // 模拟下载过程
                setTimeout(() => {
                    downloadBtn.textContent = '已下载';
                    downloadBtn.classList.add('downloaded');
                    downloadBtn.disabled = false;
                    
                    // 更新已下载内容
                    let downloaded = downloadedContent.find(item => item.destination === destination);
                    if (downloaded) {
                        if (!downloaded.packages.includes(packageType)) {
                            downloaded.packages.push(packageType);
                        }
                    } else {
                        downloadedContent.push({
                            destination: destination,
                            name: data.name,
                            packages: [packageType],
                            date: new Date().toISOString().split('T')[0]
                        });
                    }
                    
                    updateDownloadedList();
                }, 2000);
            }
            
            // 更新已下载列表
            function updateDownloadedList() {
                if (downloadedContent.length === 0) {
                    downloadedList.innerHTML = '<div class="no-downloads">暂无已下载内容</div>';
                    return;
                }
                
                let html = '';
                downloadedContent.forEach(item => {
                    const packages = [];
                    if (item.packages.includes('language')) packages.push('语言包');
                    if (item.packages.includes('map')) packages.push('离线地图');
                    if (item.packages.includes('culture')) packages.push('文化知识库');
                    
                    html += `
                        <div class="downloaded-item">
                            <div class="downloaded-info">
                                <h4>${item.name}</h4>
                                <p>已下载: ${packages.join(', ')}</p>
                                <p class="download-date">下载日期: ${item.date}</p>
                            </div>
                            <div class="downloaded-actions">
                                <button class="update-btn">更新</button>
                                <button class="delete-btn" data-destination="${item.destination}">删除</button>
                            </div>
                        </div>
                    `;
                });
                
                downloadedList.innerHTML = html;
                
                // 添加删除事件
                document.querySelectorAll('.delete-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const destination = this.dataset.destination;
                        if (confirm(`确定要删除${destinationData[destination].name}的离线内容吗？`)) {
                            const index = downloadedContent.findIndex(item => item.destination === destination);
                            if (index !== -1) {
                                downloadedContent.splice(index, 1);
                                updateDownloadedList();
                                
                                // 如果当前选中的是被删除的目的地，更新按钮状态
                                const selectedCard = document.querySelector('.destination-card.selected');
                                if (selectedCard && selectedCard.dataset.destination === destination) {
                                    downloadLanguageBtn.textContent = '下载';
                                    downloadMapBtn.textContent = '下载';
                                    downloadCultureBtn.textContent = '下载';
                                    downloadLanguageBtn.classList.remove('downloaded');
                                    downloadMapBtn.classList.remove('downloaded');
                                    downloadCultureBtn.classList.remove('downloaded');
                                }
                            }
                        }
                    });
                });
            }
            
            // 初始化已下载列表
            updateDownloadedList();
            
            // 如果有已下载内容，默认选中第一个
            if (downloadedContent.length > 0) {
                selectDestination(downloadedContent[0].destination);
            }
        });
    </script>
</body>
</html>